<template>
  <div class="banner">
    <div>
      <div class="banner-img" @click="showSwiper">
        <img
          src="//img1.qunarzz.com/sight/p0/1505/a1/a19dc830ad17b2ee.water.jpg_600x330_01c50685.jpg"
          alt=""
        />
      </div>
      <div class="banner-title">柘林湖(AAAAA景区)</div>
    </div>
    <div class="img-swiper" v-show="imgSwiper" @click="hideSwiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, id) of bannerList" :key="id">
          <img :src="item.imgUrl" alt="" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgSwiper: false,
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      bannerList: [
        {
          id: "01",
          imgUrl:
            "//qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/0100s120006db2q421059.jpg_350x240_e53c511f.jpg",
        },
        {
          id: "02",
          imgUrl:
            "//qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/0100s120006db2q421059.jpg_350x240_e53c511f.jpg",
        },
        {
          id: "03",
          imgUrl:
            "//qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/0100s120006db2q421059.jpg_350x240_e53c511f.jpg",
        },
      ],
    };
  },
  methods: {
    showSwiper() {
      this.imgSwiper = true;
    },
    hideSwiper() {
      this.imgSwiper = false;
    },
  },
};
</script>
<style scoped>
.banner {
  position: relative;
}
.banner-img {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 55%;
}
.banner-img img {
  width: 100%;
}
.banner-title {
  position: absolute;
  bottom: 0.3rem;
  left: 0.3rem;
  font-size: 0.4rem;
  color: #fff;
}
.img-swiper {
  background: #000;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-swiper img {
  width: 100%;
}
</style>
